<template>
  <div class="box flex-al al-start ">
      <div class="data-li flex-row al-c j-sb w100" v-for="(item,index) in dataList" :key="index+item.name">
        <div class="flex-row al-c">
            <div class="p"></div>
             <p>{{item.name}}</p>
        </div>
          
          <span>{{item.time}}</span>
      </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class ArticleList extends Vue {
    private dataList:Array<object>=[
        {
            name:'第七次全国人口普查综合试点启动',
            time:'06-08'
        },
        {
            name:'第七次全国人口普查综合试点启动',
            time:'06-08'
        },
        {
            name:'第七次全国人口普查综合试点启动',
            time:'06-08'
        },
        {
            name:'第七次全国人口普查综合试点启动',
            time:'06-08'
        },
        {
            name:'第七次全国人口普查综合试点启动',
            time:'06-08'
        }
    ]
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "~@/assets/less/flex.less";
@import "~@/assets/less/reset.less";
.box {
    .data-li{
        height: 45px;
        .pointer;
    }
  width: 100%;
    p{
        font-size: 15px;
        color: #303030;
        .blod;
    }
    span{
        font-size: 13px;
        color: #999999;

    }
  
}
</style>
